---
// 评论演示组件
---

<section class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md my-8">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">评论演示</h2>
  
  <!-- 评论容器 -->
  <div class="space-y-6">
    <!-- 评论项 1 -->
    <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
      <!-- 评论头部 -->
      <div class="flex items-center mb-3">
        <img 
          src="/nice/static/images/thumbs/user1.jpg" 
          alt="用户头像" 
          class="w-10 h-10 rounded-full mr-3"
        />
        <div>
          <h3 class="font-medium text-gray-800 dark:text-white">张三</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">2023-06-15 14:30</p>
        </div>
      </div>
      
      <!-- 评论内容 -->
      <p class="text-gray-700 dark:text-gray-300 mb-3">
        这篇文章写得非常好，对我很有帮助！特别是关于前端性能优化的部分，让我受益匪浅。
      </p>
      
      <!-- 评论交互 -->
      <div class="flex items-center space-x-4 text-sm">
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-like">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
          </svg>
          <span>点赞</span>
          <span class="ml-1 text-gray-400 dark:text-gray-500">42</span>
        </button>
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-reply">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
          </svg>
          <span>回复</span>
        </button>
      </div>
      
      <!-- 回复表单（默认隐藏） -->
      <div class="mt-3 hidden comment-reply-form">
        <div class="flex">
          <textarea 
            class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white resize-none"
            rows="2"
            placeholder="写下你的回复..."
          ></textarea>
          <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors reply-submit">
            回复
          </button>
        </div>
      </div>
      
      <!-- 嵌套回复 -->
      <div class="mt-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-4">
        <!-- 回复项 1 -->
        <div class="p-3 bg-gray-50 dark:bg-gray-750 rounded-lg">
          <div class="flex items-center mb-2">
            <img 
              src="/nice/static/images/thumbs/user2.jpg" 
              alt="用户头像" 
              class="w-8 h-8 rounded-full mr-2"
            />
            <div>
              <h4 class="font-medium text-sm text-gray-800 dark:text-white">李四</h4>
              <p class="text-xs text-gray-500 dark:text-gray-400">2023-06-15 15:45</p>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            是的，我也觉得这部分内容很实用！我已经在我的项目中尝试了这些优化方法，效果很明显。
          </p>
          <div class="flex items-center mt-2 space-x-3 text-xs">
            <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
              点赞 (12)
            </button>
            <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
              回复
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评论项 2 -->
    <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-3">
        <img 
          src="/nice/static/images/thumbs/user3.jpg" 
          alt="用户头像" 
          class="w-10 h-10 rounded-full mr-3"
        />
        <div>
          <h3 class="font-medium text-gray-800 dark:text-white">王五</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">2023-06-16 09:15</p>
        </div>
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 mb-3">
        我有一个问题想请教一下，关于文章中提到的图片懒加载方法，是否适用于所有类型的网站？我们的网站有很多图片轮播，这种情况下是否还能使用这种方法？
      </p>
      
      <div class="flex items-center space-x-4 text-sm">
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-like">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
          </svg>
          <span>点赞</span>
          <span class="ml-1 text-gray-400 dark:text-gray-500">8</span>
        </button>
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-reply">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
          </svg>
          <span>回复</span>
        </button>
      </div>
      
      <!-- 回复表单（默认隐藏） -->
      <div class="mt-3 hidden comment-reply-form">
        <div class="flex">
          <textarea 
            class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white resize-none"
            rows="2"
            placeholder="写下你的回复..."
          ></textarea>
          <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors reply-submit">
            回复
          </button>
        </div>
      </div>
      
      <!-- 嵌套回复 -->
      <div class="mt-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-4">
        <!-- 回复项 1 -->
        <div class="p-3 bg-gray-50 dark:bg-gray-750 rounded-lg">
          <div class="flex items-center mb-2">
            <img 
              src="/nice/static/images/thumbs/author.jpg" 
              alt="作者头像" 
              class="w-8 h-8 rounded-full mr-2"
            />
            <div>
              <h4 class="font-medium text-sm text-gray-800 dark:text-white">作者</h4>
              <p class="text-xs text-gray-500 dark:text-gray-400">2023-06-16 10:30</p>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            感谢你的提问！图片懒加载方法确实适用于大多数网站，包括有轮播图的网站。对于轮播图，你可以只懒加载当前显示的图片，当用户切换到下一张时再加载。很多懒加载库都支持这种场景，比如LazyLoad或Intersection Observer API。
          </p>
          <div class="flex items-center mt-2 space-x-3 text-xs">
            <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
              点赞 (24)
            </button>
            <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
              回复
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评论项 3（带图片） -->
    <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-3">
        <img 
          src="/nice/static/images/thumbs/user4.jpg" 
          alt="用户头像" 
          class="w-10 h-10 rounded-full mr-3"
        />
        <div>
          <h3 class="font-medium text-gray-800 dark:text-white">赵六</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">2023-06-17 16:20</p>
        </div>
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 mb-3">
        我按照文章中的方法做了一些测试，这是我的测试结果截图，优化效果确实很明显！
      </p>
      
      <!-- 评论图片 -->
      <div class="mb-3">
        <img 
          src="/nice/static/images/placeholder/result.jpg" 
          alt="测试结果" 
          class="max-w-xs rounded-lg border border-gray-200 dark:border-gray-700"
        />
      </div>
      
      <div class="flex items-center space-x-4 text-sm">
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-like">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
          </svg>
          <span>点赞</span>
          <span class="ml-1 text-gray-400 dark:text-gray-500">15</span>
        </button>
        <button class="flex items-center text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors comment-reply">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
          </svg>
          <span>回复</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors load-more">
      加载更多评论
    </button>
  </div>
  
  <!-- 评论表单 -->
  <div class="mt-8">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">发表评论</h3>
    <div class="bg-gray-50 dark:bg-gray-750 p-4 rounded-lg">
      <div class="flex mb-4">
        <img 
          src="/nice/static/images/thumbs/current-user.jpg" 
          alt="当前用户头像" 
          class="w-10 h-10 rounded-full mr-3"
        />
        <div class="flex-1">
          <textarea 
            class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-white resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
            rows="4"
            placeholder="写下你的评论..."
          ></textarea>
          
          <!-- 评论工具条 -->
          <div class="flex justify-between items-center mt-3">
            <div class="flex space-x-3">
              <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </button>
              <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                </svg>
              </button>
              <button class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                </svg>
              </button>
            </div>
            <button class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors comment-submit">
              发表评论
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 点赞功能
    const likeButtons = document.querySelectorAll('.comment-like');
    likeButtons.forEach(button => {
      button.addEventListener('click', function() {
        const likeCountElement = this.querySelector('span:last-child');
        let likeCount = parseInt(likeCountElement.textContent);
        
        if (this.classList.contains('text-blue-500')) {
          // 取消点赞
          likeCount--;
          this.classList.remove('text-blue-500', 'dark:text-blue-400');
        } else {
          // 点赞
          likeCount++;
          this.classList.add('text-blue-500', 'dark:text-blue-400');
        }
        
        likeCountElement.textContent = likeCount;
      });
    });
    
    // 回复功能
    const replyButtons = document.querySelectorAll('.comment-reply');
    replyButtons.forEach(button => {
      button.addEventListener('click', function() {
        const replyForm = this.closest('div').nextElementSibling;
        replyForm.classList.toggle('hidden');
      });
    });
    
    // 提交回复
    const replySubmitButtons = document.querySelectorAll('.reply-submit');
    replySubmitButtons.forEach(button => {
      button.addEventListener('click', function() {
        const textarea = this.closest('.comment-reply-form').querySelector('textarea');
        const commentContent = textarea.value.trim();
        
        if (commentContent) {
          // 在实际应用中，这里应该发送请求到服务器保存回复
          alert('回复已提交：' + commentContent);
          
          // 清空输入框并隐藏回复表单
          textarea.value = '';
          this.closest('.comment-reply-form').classList.add('hidden');
        } else {
          alert('请输入回复内容');
        }
      });
    });
    
    // 提交评论
    const commentSubmitButton = document.querySelector('.comment-submit');
    commentSubmitButton.addEventListener('click', function() {
      const textarea = document.querySelector('textarea[placeholder="写下你的评论..."]');
      const commentContent = textarea.value.trim();
      
      if (commentContent) {
        // 在实际应用中，这里应该发送请求到服务器保存评论
        alert('评论已提交：' + commentContent);
        
        // 清空输入框
        textarea.value = '';
      } else {
        alert('请输入评论内容');
      }
    });
    
    // 加载更多评论
    const loadMoreButton = document.querySelector('.load-more');
    loadMoreButton.addEventListener('click', function() {
      // 模拟加载中状态
      this.textContent = '加载中...';
      this.disabled = true;
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 在实际应用中，这里应该发送请求到服务器加载更多评论
        alert('已加载全部评论');
        
        // 恢复按钮状态
        this.textContent = '加载更多评论';
        this.disabled = false;
      }, 1000);
    });
  });
</script>